/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

.container{
  display: block;
  width: 100%;
  max-width: 700px;
  margin: auto;
}

.display{
  margin: 20px 24px;
  height: 100px;
  width: 100%;
  max-width: 660px;
  line-height: 100px;
  border:1px solid #e6e6e6;
  font-size: 80px;
  padding-right: 20px;
  color: #777e88;
  font-weight: 600;
  text-align: right;
  background-color: #f8f8f8;
  border-radius: 9px;
  overflow: hidden;
}

.container button{
  width: 90%;
  height: 80px;
  margin: 10px;
  font-size: 30px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 0px 10px rgb(0,0,0,.5);
          box-shadow: 0px 0px 10px rgb(0,0,0,.5);
  background: -o-linear-gradient(top left,rgb(217,217,217),rgb(161,165,173));
  background: -webkit-gradient(linear,left top, right bottom,from(rgb(217,217,217)),to(rgb(161,165,173)));
  background: linear-gradient(to bottom right,rgb(217,217,217),rgb(161,165,173));
  border: 1px solid rgb(162,165,168);
}

.container button:hover,
.container button:hover{
  background: -o-linear-gradient(top left,rgb(200,200,200),rgb(144, 148, 155));
  background: -webkit-gradient(linear,left top, right bottom,from(rgb(200,200,200)),to(rgb(144, 148, 155)));
  background: linear-gradient(to bottom right,rgb(200,200,200),rgb(144, 148, 155));
  border: 1px solid rgb(162,165,168);
}

.container button:focus{
  background: -o-linear-gradient(top left,rgb(217,217,217),rgb(161,165,173));
  background: -webkit-gradient(linear,left top, right bottom,from(rgb(217,217,217)),to(rgb(161,165,173)));
  background: linear-gradient(to bottom right,rgb(217,217,217),rgb(161,165,173));
  border: 1px solid rgb(162,165,168);
}

.resultBotton{
  height: 180px!important;
  position: absolute ;
  top: 200px;
  background: -o-linear-gradient(top,#f2b452,#d78437)!important;
  background: -webkit-gradient(linear,left top, left bottom,from(#f2b452),to(#d78437))!important;
  background: linear-gradient(to bottom,#f2b452,#d78437)!important;
}

.row {
  margin: auto 20px;
}

.sonCol{
  display:  -webkit-box;
  display:  -ms-flexbox;
  display:  flex ;
  -webkit-box-orient:  vertical;
  -webkit-box-direction:  reverse;
      -ms-flex-direction:  column-reverse ;
          flex-direction:  column-reverse ;
}
.grandCol{
  display:  -webkit-box;
  display:  -ms-flexbox;
  display:  flex ;
  -webkit-box-orient:  horizontal;
  -webkit-box-direction:  normal;
      -ms-flex-direction:  row ;
          flex-direction:  row ;
  -ms-flex-pack:  distribute;
      justify-content:  space-around  ;
}
.functionButton{
  display:  -webkit-box;
  display:  -ms-flexbox;
  display:  flex ;
  -webkit-box-orient:  vertical;
  -webkit-box-direction:  normal;
      -ms-flex-direction:  column ;
          flex-direction:  column ;
}

.indecrease{
  background: #909fb7;
}